<template>
  <dv-border-box-12 style="height: 100%">
    <div style="padding: 20px 20px 10px 20px" class="flex-x flex-space w100">
      <MyTitle :title="'远程监控'" />
      <div>
        <el-button type="primary" size="mini" @click="handleControl"
          >远程控制</el-button
        >
        <el-button type="primary" size="mini" @click="handleIssued"
          >任务下发</el-button
        >
      </div>
    </div>
    <div class="remote_table">
      <el-table
        v-adaptive="{
          bottomOffset: 20
        }"
        height="100px"
        :data="formulaRecordInfosList"
        size="small"
      >
        <el-table-column prop="stageId" label="阶段" align="center" />
        <el-table-column
          show-overflow-tooltip
          prop="setTemperature"
          label="设定温度"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.setTemperature || "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="startTemperature"
          label="开始温度"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.startTemperature || "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="startTime"
          label="开始时间"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.startTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="endTemperature"
          label="结束温度"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.endTemperature || "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="endTime"
          label="结束时间"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.endTime | formatDate }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 远程控制 -->
    <ControlDialog :visible.sync="controlShow" />
    <!-- 任务下发 -->
    <IssuedDialog ref="issuedDialogRef" :visible.sync="issuedShow" />
  </dv-border-box-12>
</template>

<script>
import ControlDialog from "./ControlDialog.vue";
import IssuedDialog from "./IssuedDialog.vue";

import { mapGetters } from "vuex";
import MyTitle from "./DTitle.vue";
export default {
  components: {
    ControlDialog,
    IssuedDialog,
    MyTitle
  },
  computed: {
    ...mapGetters(["formulaRecordInfosList"])
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      controlShow: false,
      issuedShow: false
    };
  },
  methods: {
    handleIssued() {
      this.issuedShow = true;
      this.$nextTick(() => {
        this.$emit("handleIssued");
        this.$refs.issuedDialogRef.getTaskDownLoadInfos();
      });
    },
    handleControl() {
      this.controlShow = true;
      this.$emit("handleControl");
    }
  }
};
</script>

<style lang="scss" scoped>
.remote_table /deep/ .el-table {
  background-color: transparent !important;

  .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 10px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }

  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  .el-table__body-wrapper::-webkit-scrollbar {
    width: 4px !important;
    height: 4px;
  }

  .el-table__body-wrapper::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }

  .el-table__empty-text {
    color: #fff;
  }

  tr,
  th {
    color: #fff;
    background-color: transparent !important;
  }

  .el-table__row:hover > td {
    background-color: inherit !important;
  }

  td,
  th.is-leaf {
    border-bottom: 0 !important;
  }

  .el-table__row--striped:hover > td {
    background-color: inherit;
  }
}
</style>
